import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"

import "https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" //引入懒加载的插件，并且注意必须得先引入好jquery.js，否则无法生效

import "./jquery.pagination.js" // 引入分页插件

function renderList() {
    $.ajax({
        url: "http://10.31.155.75/mogujie/php/list.php",
        dataType: "json"
    }).done(function(data) {
        let arrData = data.pagecontent
        let str = ""
        $.each(arrData, function(index, value) {
            str += `
                <li>
                  <a href="detail.html?sid=${value.sid}" class="render_data">
                    <img data-original="${value.url}" alt="" class="render_img lazy">
                    <p>${value.title}</p>
                    <span class="render_price">￥${value.price}</span>
                    <span class="render_salenum">
                      <img src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png" alt="">
                      <strong>${value.salenumber}</strong>
                    </span>
                  </a>
                </li>
             `
        })
        $(".render").html(str)

        // 实现懒加载步骤 -- 1.给img标签加上自定义属性data-original(后面替换成src属性) 2.给每一个img标签添加一个类名lazy 3.添加懒加载实现代码
        $("img.lazy").lazyload({
            effect: "fadeIn", // 图片懒加载出现形式
            threshold: 50 // 提前开始加载，值代表页面高度，滚动条距离目标元素还有50的高度时就开始加载图片
        })

        // 分页插件的使用
        $('.page').pagination({
            pageCount: data.pagesize,
            jump: true,
            coping: true,
            homePage: '首页',
            endPage: '末页',
            prevContent: '上页',
            nextContent: '下页',
            callback: function(api) {
                // 将页面传给后端，后端返回对应数据，重新进行渲染
                renderData(api.getCurrent())
            }
        })

        // 默认排序
        $('button').eq(0).on('click', function() {
            //点击排序重置第一页。
            $('.page').pagination({
                pageCount: data.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function(api) {
                    renderData(api.getCurrent())
                }
            })
            renderData(1) //重新渲染
        })

        // 升序排序
        $('button').eq(1).on('click', function() {
            //点击排序重置第一页。
            $('.page').pagination({
                pageCount: data.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function(api) {
                    renderData(api.getCurrent(), 1)
                }
            })
            renderData(1, 1) //重新渲染
        })

        // 降序排序
        $('button').eq(2).on('click', function() {
            //点击排序重置第一页。
            $('.page').pagination({
                pageCount: data.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function(api) {
                    renderData(api.getCurrent(), 0)
                }
            })
            renderData(1, 0) //重新渲染
        })

        // 封装动态获取(分页 / 分页+排序)时的数据渲染
        function renderData(page, sort) {
            if (arguments.length == 2) {
                $.ajax({
                    url: 'http://10.31.155.75/mogujie/php/list.php',
                    data: {
                        page: page,
                        sort: sort
                    },
                    dataType: 'json',
                }).done(function(data) {
                    console.log(data.pagesize)
                    let arrData = data.pagecontent //接口数据
                    let str = ''
                    $.each(arrData, function(index, value) { //数组的索引和值
                        //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
                        str += `
                          <li>
                            <a href="detail.html?sid=${value.sid}" class="render_data">
                              <img src="${value.url}" alt=""  class="render_img">
                              <p>${value.title}</p>
                              <span class="render_price">￥${value.price}</span>
                              <span class="render_salenum">
                                <img src="https://s18.mogucdn.com/p2/160908/                upload_27g4f1ch6akie83hacb676j622b9l_32x30.png" alt="">
                                <strong>${value.salenumber}</strong>
                              </span>
                            </a>
                          </li>
                        `
                    })
                    $(".render").html(str)
                })
            } else if (arguments.length == 1) {
                $.ajax({
                    url: 'http://10.31.155.75/mogujie/php/list.php',
                    data: {
                        page: page
                    },
                    dataType: 'json',
                }).done(function(data) {
                    let arrData = data.pagecontent //接口数据
                    let str = ''
                    $.each(arrData, function(index, value) { //数组的索引和值
                        //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
                        str += `
                      <li>
                        <a href="detail.html?sid=${value.sid}" class="render_data">
                          <img src="${value.url}" alt=""  class="render_img">
                          <p>${value.title}</p>
                          <span class="render_price">￥${value.price}</span>
                          <span class="render_salenum">
                            <img src="https://s18.mogucdn.com/p2/160908/                upload_27g4f1ch6akie83hacb676j622b9l_32x30.png" alt="">
                            <strong>${value.salenumber}</strong>
                          </span>
                        </a>
                      </li>
                    `
                    })
                    $(".render").html(str)
                })
            }
        }

    })
}


export {
    renderList
}